<template>
	<scroll-view scroll-x class="uni-swiper-tab">
			<view class="swiper-tab-list" 
			v-for="(item,index) in tabsList" 
			:class="{active: current == index}" 
			:style="{'width':tabWidth}" 
			:key="index"
			@tap="changeTab(index)">
			{{item}}
			<view></view>
			</view>
	</scroll-view>
</template>

<script>
	export default {
		props:{
			tabsList: {
				type: Array
			},
			currentTab: {
				type: Number,
				default: 0
			},
			startFlex:{ 
				type: Boolean,
				default: false
			}
		},
		data(){
			return {
				current : this.currentTab,
			}
		},
		computed:{
			tabWidth(){
				return this.startFlex ? 'calc(100%/'+this.tabsList.length+')' : uni.upx2px(150) + "px";
			}
		},
		watch:{
			currentTab(v){
				this.current = v
			}
		},
		methods:{
			changeTab(index){
				this.current = index
				this.$emit("changeTab",index)
			}
		}
	}
</script>

<style scoped>
	.swiper-tab-list {
		color: #969696;
		
		font-size: 30rpx;
		font-weight: 1000;
	}
	.swiper-tab-list.active {
		color: #000000 ;
	}
	.uni-swiper-tab {
		border-bottom: none;
	}
	.swiper-tab-list.active > view {
		border-radius: 8rpx;
		border-top: 6rpx solid #fede33;
		width: 80rpx;
		margin: 0 auto;
	} 
</style>
